<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        ThemeSwitcher
    </ui:define>

    <ui:define name="description">
        ThemeSwitcher applies new themes on-the-fly without full page refresh.
    </ui:define>

    <ui:param name="documentationLink" value="/components/themeswitcher" />

    <ui:define name="implementation">

        <h:form>

            <h:panelGrid columns="2" cellpadding="10">
                <p:outputLabel for="basic" value="Basic:" />
                <p:themeSwitcher id="basic" style="width:165px">
                    <f:selectItem itemLabel="Choose Theme" itemValue="" />
                    <f:selectItems value="#{themeSwitcherView.themes}" var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme.name}"/>
                </p:themeSwitcher>

                <p:outputLabel for="advanced" value="Advanced:" />
                <p:themeSwitcher id="advanced" style="width:165px" effect="fade" var="t">
                    <f:selectItem itemLabel="Choose Theme" itemValue="#{null}" />
                    <f:selectItems value="#{themeSwitcherView.themes}" var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" />

                    <p:column>
                        <h:graphicImage name="showcase/images/themeswitcher/themeswitcher-#{t.name}.png" alt="#{t.name}" styleClass="ui-theme"/>
                    </p:column>

                    <p:column>
                        #{t.displayName}
                    </p:column>
                </p:themeSwitcher>
            </h:panelGrid>

            <p:separator />

            <p:dialog header="Dialog" widgetVar="dlg" minHeight="40" modal="true">
                <h:outputText value="Resistance to PrimeFaces is futile!" />
            </p:dialog>

            <p:commandButton value="Dialog" onclick="PF('dlg').show()" type="button" style="display:block;"/>

            <p:panel header="Panel" style="margin:20px 0px">
                Panel Content
            </p:panel>

            <p:spinner />

            <p:toolbar style="margin:20px 0px">
                <f:facet name="left">
                    <p:commandButton type="button" value="New" icon="pi pi-file" />
                    <p:commandButton type="button" value="Open" icon="pi pi-folder-open"/>
                    <p:commandButton type="button" title="Save" icon="pi pi-save"/>
                    <p:commandButton type="button" title="Delete" icon="pi pi-trash"/>
                    <p:commandButton type="button" title="Print" icon="pi pi-print"/>
                </f:facet>

                <f:facet name="right">
                    <p:menuButton value="Navigate">
                        <p:menuitem value="Home" url="http://www.primefaces.org" />
                        <p:menuitem value="ShowCase" url="http://www.primefaces.org/showcase" />
                        <p:menuitem value="TouchFaces" url="http://www.primefaces.org/showcase/touch" />
                    </p:menuButton>
                </f:facet>
            </p:toolbar>

            <p:accordionPanel>
                <p:tab title="Tab1">Tab1 Content</p:tab>
                <p:tab title="Tab2">Tab2 Content</p:tab>
                <p:tab title="Tab3">Tab3 Content</p:tab>
            </p:accordionPanel>

        </h:form>

    </ui:define>

</ui:composition>